<template>
	<!--  #ifdef MP-WEIXIN -->
	<view>
		<view class="poFixed wPer100 disFlex aliItCenter juConCenter f26r zIndex1 colFff"
			:style="background + 'height: ' + height + ';padding-top: ' + paddingTop + ';'"
		>
			<view class="f30r poRel flex1 teAliCenter foWeiBold">
				<view class="poAbs left0 w100r h50r"
					@click="onBack" v-if="back" 
				>
					<image :src="baseUrl + 'iconLeftWhite.png'" mode="aspectFit"
						class="w50r h50r"
					></image>
				</view>
				<view class="poAbs left100r w100r h50r"
					@click="cliGoHome" v-if="goHome"
				>
					<image :src="baseUrl + 'iconGoHome.png'" mode="aspectFit"
						class="w40r h40r poRel top5r"
					></image>
				</view>
				{{title}}
			</view>
		</view>
		<view :style="'height: ' + height + ';padding-top: ' + paddingTop + ';'"
		></view>
	</view>
	<!--  #endif -->
</template>
<script>
import { baseUrl } from '@/utils/request.js'
export default {
	data() {
		return {
			baseUrl,
			height: 0, 
			paddingTop: 0,
		}
	},
	props:{
		title: {  type: String, default: '' },
		//建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
		background: { type: String, default: 'transparent' },
		back: { type: Boolean, default: false },
		goHome: { type: Boolean, default: false },
	},
	created() {
		// #ifdef MP-WEIXIN
			const demo = uni.getMenuButtonBoundingClientRect()
			this.height = demo.height + 5 + "px"
			this.paddingTop = demo.top + "px"
			this.$emit('topTotalHeight', demo.height + 5 + demo.top);
		// #endif
		// #ifdef H5
			this.$emit('topTotalHeight', 0);
		// #endif
	},
	methods: {
		cliGoHome() {
			uni.switchTab({ url: '/pages/index/index' })
		},
		onBack() {
			this.$emit("onBack")
		}
	}
}
</script>